<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="submit" id="addBtn" value="添加一条新的访客信息" />
    <input type="submit" id="delSelect" value="删除选中" />
    <input type="submit" id="sortBtn" value="年龄从小到大" />

    <table border="1" cellspacing="0" cellpadding="10">
      <tbody>
        <tr>
          <td>序列号</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>操作</td>
          <td>选择</td>
        </tr>
      </tbody>
    </table>

    <script>
      var info = [
        {
          name: "胡杭",
          age: 16,
        },
        {
          name: "胜明",
          age: 22,
        },
        {
          name: "军毅",
          age: 21,
        },
        {
          name: "晓华",
          age: 13,
        },
        {
          name: "盛聪",
          age: 23,
        },
        {
          name: "侦剑",
          age: 32,
        },
        {
          name: "红翔",
          age: 25,
        },
        {
          name: "超维",
          age: 18,
        },
        {
          name: "士琪",
          age: 22,
        },
        {
          name: "艳华",
          age: 20,
        },
      ];

      let tbody = document.querySelector("tbody"),
        addBtn = document.getElementById("addBtn"),
        delSelect = document.getElementById("delSelect"),
        sortBtn = document.getElementById("sortBtn"),
        delBtn, i = 0,n = info.length;
      // 添加一条新的访客信息
      addBtn.onclick = () => {
        if (i < n) {
          let newtr = document.createElement("tr");
          tbody.appendChild(newtr);
          newtr.innerHTML = `
            <td>${i + 1}</td>
            <td>${info[i]["name"]}</td>
            <td>${info[i]["age"]}</td>
            <td><button>删除</button></td>
            <td><input type="checkbox" name="select" value="select"></td>
            `;
		      i++;

          delBtn = tbody.querySelectorAll("td>button");
          // 遍历给每一个删除按钮绑定点击事件
          delBtn.forEach(el => {
            el.onclick = () => {el.parentElement.parentElement.remove()};
          });
         
        }
      };



      // 删除选中
      delSelect.onclick = () => {
        let select = tbody.querySelectorAll("input[name='select']");
        //el.checked  是否被选中： true  false true
        select.forEach(el => el.checked&&el.parentElement.parentElement.remove());
	    };



      // 年龄从小到大
      sortBtn.onclick = () => {
        let tr = tbody.querySelectorAll("tr:not(:first-child)");//NodeList(5) [tr, tr, tr, tr, tr]
        let trList = [],i = 0;
		   
        tr.forEach(val => {
		      let age = Number(val.querySelectorAll("td")[2].innerHTML), //得到转换为数字的age   16
            trObj = {};
          trObj["Age"] = age;
          trObj["tr"] = tr[i];
          trList.push(trObj); //  [{Age: 16, tr: tr}]
          i++;
        });
        // console.log(trList); //  Array(3)[{Age: 16, tr: tr},{Age: 22, tr: tr},{Age: 21, tr: tr}]
        trList.sort((a, b) => a.Age - b.Age);
        // console.log(trList); //  [{Age: 16, tr: tr},{Age: 21, tr: tr},{Age: 22, tr: tr}]
        // 插入数据到页面
        tbody.innerHTML = `<tr><td>序列号</td> <td>姓名</td><td>年龄</td><td>操作</td><td>选择</td></tr>`;
        trList.forEach(val => {
          // console.log(val["tr"]); //  <tr>...</tr>
          // tbody.innerHTML =val["tr"]//数据没显示，显示的是:  [object HTMLTableRowElement]
          tbody.append(val["tr"]);
        });
      };


    </script>
  </body>
</html>
